@tran5: rgba(128, 128, 128, 0.5); //鼠标悬浮后边框颜色
@tran1: rgba(128, 128, 128, 0.1); //按钮输入框边框颜色

@color: #fff; //主要字体颜色
@back_td: #272a2d;
@back_tr: #272a2d;
@back_th: #272a2d; //
@back_td: #272a2d; //表格内背景
@back_btn: #31343a; //主要按钮背景色

html {
    font-size: 14px;
}

.box_colse,
.aside_nav,
.app-container,
.el-message-box__wrapper,
.el-dialog {
    --wails-draggable: no-drag;
}

.box_logo {
    --wails-draggable: drag;
}

// 表格
.box_table.el-table {
    color: @color;
    background: #000;

    &::before {
        background: transparent;
    }

    tr {
        background-color: @back_btn;
    }

    td.el-table__cell,
    th.el-table__cell.is-leaf {
        border-bottom: 1px solid #333333;
    }

    th.el-table__cell {
        background-color: #212121;
    }

    .el-table__body-wrapper {

        background-color: #ddd;

    }

    .el-table__empty-text {
        line-height: 60px;
        width: 50%;
        color: #fff;
    }

    .el-table__body-wrapper {
        background-color: @back_btn;
    }

    // ----------修改elementui表格的默认样式-----------

    .el-table__body-wrapper {

        &::-webkit-scrollbar {

            // 整个滚动条

            width: 0; // 纵向滚动条的宽度

            background: rgba(213, 215, 220, 0.3);

            border: none;

        }

        &::-webkit-scrollbar-track {

            // 滚动条轨道

            border: none;

        }

    }

    // --------------------隐藏table gutter列和内容区右侧的空白 start

    th.gutter {

        display: none;

        width: 0;

    }

    colgroup col[name="gutter"] {

        display: none;

        width: 0;

    }

    .el-table__body {

        width: 100% !important;

    }



}

// 文字按钮
.el-button--text:focus,
.el-button--text:hover {
    color: #ffd04b;
}

.el-button--text {
    color: #ffd04b;
}

.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: #272a2d !important;
}

// 红色按钮
.el-button--danger {
    color: #FFF;
    background-color: #c71515;
    border-color: @tran1;
}

.el-button--danger:focus,
.el-button--danger:hover {
    background: #c71515;
    border-color: @tran5;
}

.el-row {

    .el-range-editor.is-active,
    .el-range-editor.is-active:hover,
    .el-select .el-input.is-focus .el-input__inner {
        border: 1px solid @tran1;

    }



    .el-select .el-input__inner:focus {
        border: 1px solid @tran1;
    }

    .el-input__icon {
        line-height: 28px;
    }

    .el-select-dropdown {
        background: #333;
        border: 1px solid transparent;

        .el-select-dropdown__item {
            color: #fff;
            font-size: 12px;
        }
    }

    .el-popper[x-placement^=bottom] .popper__arrow::after {
        border-bottom-color: #333;
    }

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #5a5a5a;
    }

    // 输入框
    .el-input__inner {
        background: #252525;
        border: 1px solid @tran1;
        color: @color;
        font-size: 12px;
        line-height: 28px;
        height: 28px;
    }

}

// 表单
.el-descriptions,
.el-form {

    .el-form-item {
        margin-bottom: 18px;
    }

    .el-form-item__content {
        line-height: 28px;
    }

    .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 12px;
        color: @color;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
        line-height: 28px;
    }

    .el-textarea__inner {
        background: #252525;
        border: 1px solid rgba(128, 128, 128, 0.1);

    }

    .el-textarea__inner {
        color: #ffffff;
    }

    .el-textarea__inner:focus {
        border: 1px solid rgba(128, 128, 128, 0.1);
    }

    // 输入框
    .el-input__inner {
        background: #252525;
        border: 1px solid @tran1;
        color: @color;
        font-size: 12px;
        line-height: 28px;
        height: 28px;
    }

    .el-input.is-active .el-input__inner,
    .el-input__inner:focus {
        border: 1px solid @tran1
    }

    .el-input-number {
        line-height: 28px;
    }

    .el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),
    .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
        border: 1px solid @tran1;
    }

    .el-range-editor.is-active,
    .el-range-editor.is-active:hover,
    .el-select .el-input.is-focus .el-input__inner {
        border: 1px solid @tran1;

    }



    .el-select .el-input__inner:focus {
        border: 1px solid @tran1;
    }

    .el-input__icon {
        line-height: 28px;
    }

    .el-input-number__decrease:hover,
    .el-input-number__increase:hover {
        color: @color;
    }

    .el-input-number__decrease,
    .el-input-number__increase {
        position: absolute;
        z-index: 1;
        top: 1px;
        height: auto;
        text-align: center;
        background: @back_btn;
        color: @color;
        cursor: pointer;
        font-size: 13px;
        width: 28px;
    }

    .el-input-number__increase {
        border-left: none;
    }

    .el-input-number__decrease {
        border-right: none;
    }

    // 单选按钮
    .el-radio__input.is-checked+.el-radio__label {
        color: @color;
        font-size: 12px;
    }

    .el-radio {
        color: #6f6d6d;
    }

    .el-radio__inner::after {
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background-color: @color;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #7b7676;
        background: transparent;
    }

    .el-radio__inner {
        background-color: transparent;
    }

    .el-tag {
        background-color: #393c42;
        border-color: rgba(128, 128, 128, 0.3);
        height: 28px;
        padding: 0 10px;
        line-height: 25px;
        color: #ffff;

        .el-tag__close {
            color: #fff;
            background-color: @tran5;
        }

        .el-tag__close:hover {
            color: #fff;
            background-color: @tran5;
        }
    }
}

.el-select-dropdown {
    background: #333;
    border: 1px solid transparent;

    .el-select-dropdown__item {
        color: #fff;
        font-size: 12px;
    }
}

.el-dropdown {
    display: inline-block;
    position: relative;
    color: #fff;
    font-size: 12px;
    border-color: rgba(128, 128, 128, 0.1);
    border-radius: 3px;
    background: #31343a;
    padding: 7px 15px;
    cursor: pointer;


}

.el-dropdown-menu {
    background: #333;
    padding: 5px 0;
    border: transparent;

    .el-dropdown-menu__item {
        color: #fff !important;
        line-height: 28px;
        padding: 0 12px;
        font-size: 13px;

        &:hover {
            background: rgba(128, 128, 128, 0.5);
        }

        &:active {
            background: rgba(128, 128, 128, 0.8);
        }

    }
}


.el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: #333;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background-color: #5a5a5a;
}

.el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: transparent;
}

// 主要按钮
.el-button--primary {
    color: @color;
    background: @back_btn;
    border-color: rgba(128, 128, 128, 0.1);
}

.el-button--primary:focus,
.el-button--primary:hover {
    background: @back_btn;
    border-color: @tran1;
    color: @color;
}


body {
    margin: 0;
    color: @color;
}

html {
    -webkit-user-select: none;
}

img {
    -webkit-user-drag: none;
}